<template>
  <div class="main">
    <div class="select3Wrap">
      <headerBack></headerBack>
      <div v-show="dataslens>0">
        <div class="select3Box">
          <div class="major-wrapper">
            <div class="majors flex-h">
              <div class="left">
                <scroller width="30%">
                  <div class="school" ref="wrapperHeight" :style="styStyle">
                    <div style="height:0.8rem"></div>
                    <div>
                       <span
                      :class="num1===index?'active1':''"
                      v-for="(item,index) in sortdata"
                      :key="index"
                      @click="getmajors(index,item)"
                    >{{item}}</span>
                    </div>
                   
                  </div>
                </scroller>
              </div>
              <div class="right flex1">
                  <div class="majorbox">
                        <span class="desc" v-for="its in majorData" :key="its">
                            {{its}}               
                        </span>
                  </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="dataslens===0">
        <div class="noDataImage">
          <img src="~/static/nothing/empty_meiyoushuju.png" alt />
          <div class="describe">抱歉，这个页面暂无数据~</div>
        </div>
      </div>
    </div>
    <!-- 结束 -->
  </div>
</template>

<script>
import headerBack from "~/components/headerBack";
import { getDemand, getMajors, getSubjectMajor } from "~/api/selectCourse";
import ls from "store2";
export default {
  components: {
    headerBack
  },
  data() {
    return {
      styStyle:'',
      num1: 0,
      num2: null,
      sortdata: [],
      majorData:[],
      mainData:[],
      dataslens: 1,
    };
  },
  mounted: function() {
    this.$visit(this.$route.path)
    this.getSubjectMajor()
  },
  methods: {
    getSubjectMajor(){
         this.$loading('open');
        getSubjectMajor().then(res=>{
            console.log('res: ', res);
            if(res.code=='0'){
                let datas = res.data
                this.mainData  = datas
                this.dataslens = datas.length
                if(datas.length>0){
                    datas.forEach(item=>{
                        this.sortdata.push(item.subject)
                
                    })
                }
                this.getmajors(0,datas[0].subject)
            }
        }).catch(err=>{

        }).finally(()=>{
            this.$hideLoading();
        })
    },
    getmajors(index,its){
        this.num1 = index;
        this.num2 = null;
        this.majorData = this.mainData.filter(item=>{
           
            return item.subject === its
        })
        this.majorData = this.majorData[0].major.split(",")
        console.log('this.majorData: ', this.majorData);
    },
  }
}
</script>


<style scoped lang="less">
.major-wrapper {
  width: 100%;
  height: auto;
  .majors {
    align-items: stretch;
    .left {
      width: 30%;
      height: auto;
      min-height: 100vh;
      background: rgba(247, 247, 250, 1);
      span {
        width: 100%;
        height: 1rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 0.28rem;
        font-family: "PingFangSC-Regular", PingFangSC;
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
        line-height: 0.4rem;
        background: rgba(247, 247, 250, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .active1 {
        background: #fff;
        color: @mainColor;
      }
    }
    .right {
      padding: 0 0.3rem;
      box-sizing: border-box;
        .majorbox{
            width: 100%;
            height: auto;
            span{
                display: inline-block;
                margin-right: 0.3rem;
                font-size:0.28rem;
                // font-family:PingFangSC-Regular,PingFang SC;
                font-weight:500;
                color:rgba(0,0,0,1);
                line-height:1rem;
                height: 1rem;
            }
        }

   
    }
  }
}
.select3Wrap {
  width: 7.5rem;
  background: #fff;
  overflow: hidden;
  padding-bottom: 0.5rem;
  min-height: 100vh;
  .select3Box {
    width: 100%;
    min-height: 5rem;
    height: auto;
  }
  .school-title {
    padding: 0.32rem 0.3rem;
    box-sizing: border-box;
    font-size: 0.3rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    border-bottom: solid 1px rgba(229, 232, 237, 1);
    z-index: 10;
    position: relative;
    background: #fff;
  }
  .noDataImage {
    padding-top: 0;
    text-align: center;
    margin-top: 1rem;
    img {
      width: 2.4rem;
      height: 2.4rem;
      margin-bottom: 0.24rem;
    }
    .describe {
      color: #999;
      font-size: 0.28rem;
      line-height: 0.4rem;
    }
  }
}
</style>
